<template>
  <div>
      <FenLei1/>
      <div class="list">
        <ul>
          <li @click="fun">新品</li>
          <li @click="fun1">手机</li>
          <li @click="fun2">笔记本</li>
          <li @click="fun3">台显打印</li>
          <li @click="fun4">平板</li>
          <li>穿戴</li>
          <li>耳机音箱</li>
          <li>智慧屏</li>
          <li>门锁路由</li>
          <li>VR眼镜</li>
          <li>数码配件</li>
          <li>华为智选</li>
          <li>出行车品</li>
          <li>甄选美酒</li>
          <li>家用电器</li>
          <li>智能家居</li>
          <li>个护健康</li>
          <li>教育玩具</li>
          <li>影音娱乐</li>
          <li>运动户外</li>
          <li>医疗保健</li>
          <li>华为服务</li>
          <li>企业商用</li>
          <li>良食好物</li>
          <li>生活旅行</li>
        </ul>
        <div class="right">
          <router-view/>
        </div>
      </div>
  </div>
</template>

<script>
import axios from "axios";
import FenLei1 from "@/views/runrun/components/fenlei/fenlei1.vue"

export default {
  components:{
    FenLei1,
  },
  methods:{
    fun(){
      this.$router.push("/fenlei/fenlei2")
    },
    fun1(){
      this.$router.push("/fenlei/fenlei3")
    },
    fun2(){
      this.$router.push("/fenlei/fenlei4")
    },
    fun3(){
      this.$router.push("/fenlei/fenlei5")
    },
    fun4(){
      this.$router.push("/fenlei/fenlei6")
    },
  },
  created() {
    axios(
      {
        url: "http://x92nyn.natappfree.cc/catalog/Level1",
        params: {
          type: 1
        }
      }
    ).then(
      res => {
        // this.goods=res.data.data;
        console.log("res.goodsList",res);
      }
    ).catch((err)=>{
      console.log(err);
    })
  }
}
</script>

<style scoped>
  .list{
        width: 100%;
        height: 100%;
        display: flex;
        background-color: #f1f3f5;
    }
   .list ul{
        width: 25%;
    }
    .list ul li{
        width: 100%;
        height: 0.5rem;
        text-align: center;
        line-height: 0.5rem;
    }
  .right{
    width: 75%;
  }
  .active{
    color: red;
  }
</style>